<template>
  <!--660px-->
  <div style="width: 100px; background-color: white;margin: 10px" class="main">
    <div style="float: left">
      <!-- 用户信息 -->
      <div>
        <el-card class="box-card">
          <div>
            <!--头像-->
            <div style="float:left;width:49%;">
              <el-avatar :size="60" :src="circleUrl"/>
            </div>

            <!--信息-->
            <div style="float:left;width:49%;">
              <strong>{{ userInfo.name }}</strong>
              <p style="font-size: 12px;">{{ userInfo.identity }}</p>
            </div>
          </div>

          <el-divider content-position="left" style="float: left;"></el-divider>
          <div>
            &nbsp;<span style="font-size: 8px;margin-left: 30px">账号:{{ userInfo.userId }}</span>
            &nbsp;<span style="font-size: 8px;">性别:{{ userInfo.sex }}</span>
          </div>
        </el-card>
      </div>
      <!-- 操作系统 -->
      <div>
        <el-card class="box-card-system">
          <div>
            <strong>历史登录</strong>
            <el-divider/>
            <el-timeline>
              <el-timeline-item
                  v-for="(activity, index) in activities"
                  :key="index"
                  :icon="activity.icon"
                  :type="activity.type"
                  :color="activity.color"
                  :size="activity.size"
                  :hollow="activity.hollow"
                  :timestamp="activity.loginTime"
              >
                {{ activity.name }}
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-card>
      </div>
    </div>
    <!--中间布局-->
    <div style="float: left; width: 700px;height: 645px;margin: 0px 0px 0px 10px;">
      <!-- 中上 -->
      <div class="MediumAndSmallPieces">
        <div>
          <el-card>
            <div class="RunningWater">
              <img src="../assets/icon/ls.png" width="65" style="margin-top: 10px; margin-right: 20px">
              <div>
                <strong>订单流水</strong>
                <br/><br/>
                <i style="font-weight: bold;">{{ orderNum }}/条</i>
              </div>
            </div>
          </el-card>
        </div>
        <div>
          <el-card>
            <div class="RunningWater">
              <img src="../assets/icon/cy.png" width="65" style="margin-top: 10px; margin-right: 20px">
              <div>
                <strong>家庭成员</strong>
                <br/><br/>
                <i style="font-weight: bold;">{{membersNum}}/位</i>
              </div>
            </div>
          </el-card>
        </div>
        <div>
          <el-card>
            <div class="RunningWater">
              <img src="../assets/icon/je.png" width="65" style="margin-top: 10px; margin-right: 20px">
              <div>
                <strong>流水金额</strong>
                <br/><br/>
                <i style="font-weight: bold;">{{cleanWaterNum}}/元</i>
              </div>
            </div>
          </el-card>
        </div>
      </div>
      <!--中下-->
      <div>
        <el-card style="width: 680px;height: 502px;float: left;margin: 20px 0px 0px 20px;">
          <div>
            <strong>疫情趋势</strong>
            <div id="mapBox" style="height: 400px;width: 600px;">
              <iframe :src="this.txtUrl" frameborder="0" width="100%" :style="{height:calHeight}" scrolling="auto"></iframe>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <!--右边布局-->
    <div style="float: left;">
      <div>
        <el-card class="box-card-announcement">
          <div>
            <strong>公告区域</strong>
            <el-divider/>
            <el-collapse accordion>
              <el-collapse-item title="修复微信支付记录失败问题" name="1">
                <div>
                  修复用户在添加流水使用微信支付记录失败问题
                </div>
              </el-collapse-item>
              <el-collapse-item title="新增公告功能" name="2">
                <div>
                  新增功能"公告管理页面" 用户可通过公告来通知全成员
                </div>
              </el-collapse-item>
              <el-collapse-item title="新增全屏显示功能" name="3">
                <div>
                  头部菜单全屏显示按钮 即可进入沉浸式操作状态
                </div>
              </el-collapse-item>
              <el-collapse-item title="个性化功能即将上线" name="4">
                <div>
                  正在日夜赶工，争取早日上线用户自定义个性化头像功能！！！
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import *as sysTool from "../assets/js/systemTool"
import {MoreFilled} from '@element-plus/icons-vue'
import echarts from 'echarts'
import dataJson from "../../public/data.json"
import Cookie from "cookie_js";
import request from "../utils/request";

export default {
  name: "Main",
  components: {},
  mounted() {
  },
  data() {
    return {
      txtUrl: "http://app.21jingji.com/html/2020yiqing/",
      ip: '1.1.1.1',
      area: '北京市',
      browser: 'chrome',
      os: 'windows7',
      circleUrl: 'https://img2.baidu.com/it/u=1048725472,3888888713&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
      //总订单数
      orderNum:'0',
      //家庭成员总数
      membersNum:'0',
      //今日净流水
      cleanWaterNum:'0',
      //基础信息
      userInfo:{},
      activities: [],
    }
  },
  computed: {
    /*获取当前登录用户*/
    showUserName() {                   //去除cookie取值带”“号的问题
      return Cookie.get("name").replace(/\"/g, "");
    },
    calHeight() {
      return (window.innerHeight - 100) + 'px';
    }
  },
  methods: {
    /*获取操作系统*/
    onCreate() {
      this.ip = sessionStorage.getItem('ip')
      this.area = sessionStorage.getItem('area')
      this.browser = sysTool.GetCurrentBrowser()
      this.os = sysTool.GetOs()
      console.log('ip，地区，浏览器，操作系统，：', this.ip, this.area, this.browser, this.os)
    },
    /*查询基础信息*/
    findByUser(){
      request.get("/user/findUserById/"+Cookie.get("userId")).then(res => {
        if(res!=null){
          this.userInfo = res
        }
      })
    },
    /*查询历史登陆记录*/
    findHistoryLanding(){
      request.post("/UserLogin/findTimeLine").then(res=>{
        console.log(res)
        if(res.code==="0"){
          this.activities = res.data;
        }
      })
    },
    /*查询总订单数量*/
    findAllOrders(){
      request.get("/bill/findAllOrders").then(res=>{
        if(res.code==="0"){
          this.orderNum = res.data
        }
      })
    },
    /*查询全部家庭成员总数*/
    findAllMembers(){
      request.get("/user/findAllMembers").then(res=>{
        if(res.code==="0"){
          this.membersNum = res.data
        }
      })
    },
    /*查询当日净流水*/
    findCleanWater(){
      request.get("/bill/findCleanWater").then(res=>{
        if(res.code==="0"){
          this.cleanWaterNum = res.data
        }
      })
    }
  },
  created() {
    //查询基础信息
    this.findByUser()
    //查询历史登陆记录
    this.findHistoryLanding()
    //查询订单总数
    this.findAllOrders()
    //查询全部家庭成员总数
    this.findAllMembers()
    //查询当日净流水
    this.findCleanWater()
  }
}
</script>
<style>
.box-card {
  width: 280px;
  height: 160px;
}

.box-card-system {
  width: 280px;
  height: 460px;
  margin-top: 20px;
}

.MediumAndSmallPieces div {
  float: left;
  width: 220px;
  height: 120px;
  margin: 0 0 0 10px;
}

.box-card-announcement {
  margin-left: 20px;
  width: 280px;
  height: 640px;
}

.RunningWater div {
  width: 80px;
  height: 90px;
  margin-right: 30px;
  float: left;
}

.RunningWater img {
  float: left;
  align-items: center;
}
#mapBox iframe {
  width: 113%;
  overflow-x: hidden;
}
</style>
